import prompt from '@ohos.prompt';
import router from '@ohos.router';
import { playAnimation, preLoad } from '../../common/model/dynamicPlaylocal'
import rdbStoreModel from '../../common/rdbStoreServer/rdbStoreServer'
import { Task } from '../../common/model/TaskClick'

import { swiperToo, goods } from '../../common/model/SMclick'

export default {
    data: {
        rdbStore: new rdbStoreModel(), //---主界面数据库
        isShow: false,
        globalY: 0,
        globalX: 0,
        isDisable: true,
        offsetY: 0, //调整画布初始位置
        offsetX: 0,
        left1: 205, //设置
        left2: 205,
        width: 720, //画布宽高---决定性
        height: 1000, //---与宽度1.78的比例78的比例
        playerList: [],
        bk: '/common/images/bk/bk1.jpg', //加载页面
        loadText: 'Loading...', //加载文字
        percent: 0,
        canvasTop: 20, //---百分比，自适应
        mantle: false,
        zIndex: 4,
        isInit:true,

        BackpackIconBackground: '/common/images/GOODS/背包1.png',
        SMdiv_if: false, //条件渲染弹窗效果if
        SM_button_bg: [], //背包界面背景贴图
        WParray: [], //物品数据数组，通过数据请求拿到数据
        WPselected: 0,
        WPchecked: [], //选中物品
        BagIcon: '/common/images/GOODS/bag.png',

        Taskdiv_if: false,
        TaskArray: [],
        TaskIconBackground: '/common/images/Task/daily tasks.png',
        TaskBarpicture: '/common/images/Task/taskbar.png',
        Task_button_bg: [], //Task界面背景贴图
        TaskIcon: '/common/images/Task/task.png',
        TaskBarButtonpicture: '/common/images/Task/unfinished.png',

        mission_menu_index: 0,
        mission_List: [2],
        mission_total1: 1,
        mission_cur1: 0,
        mission_list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

        infoLists: [],
        position: {
            x: 0,
            y: 0,
            width: 720,
            height: 1280,
        },
        initImg: new Image,
        //是否显示成就界面
        achievementShow: false,
        //成就界面数据
        isShowSetting: false,
        achievement_List: [
            {
                content:'通过词汇闯关第一关',
                flag:false
            }
        ],
        achievement_if:1,
        achievement_id:-1,
        x1: 0,
        x2: 0,
    },
    onInit() {
        this.bk = '/common/images/bk/newbk.jpg'
    },
    /* ---------- 当采用服务器存储图片时的接口 --------------------
        onShow(e) {
            ctx = this.$refs.canvas_1.getContext('2d');
            setDynamic('head', 'http://81.71.71.125:8080/api/v1/front/getAction/head?version=v1.0', 55, true, this.position, player => { //---参数:(ID、url、每帧间隔、是否开启离屏渲染(不写则取默认值)、图像定位)
                player.setCtx(ctx)
                this.playerList.push(player)
            })
            setDynamic('tail', 'http://81.71.71.125:8080/api/v1/front/getAction/tail?version=v1.0', 90, true, this.position, player => {
                player.setCtx(ctx)
                this.playerList.push(player)

                this.bk = '/common/images/bk/bk1.jpg'
                this.loadText = ''
                ctx.drawImage(this.initImg, 0, 0, 720, 1280)
            })
        },
        findPlayer(id) {
            let player = this.playerList.find(e => e.getId() === id)
            if (player) {
                console.info('xxx--- find player suc id = ' + player.id)
                return player
            }
            else console.info('xxx--- find player err id = ' + id)
        },
        playAnimation(e) {
            let id = e.target.id;
            let ctx = this.$refs.canvas_1.getContext('2d');
            this.isDisable = true;
            let promise = this.findPlayer(id).play();
            promise.then((res) => {
                let img_1 = new Image();
                img_1.src = '/common/images/initImg.png';
                ctx.drawImage(img_1, this.offsetX, this.offsetY, this.width, this.height); //---指定恢复画面
                this.isDisable = res;
            })
        },
    */

    onShow() { //------------------- 本地存放图片时的接口 ---------------------
        setTimeout(()=>{this.preloadAnimation()},500)
    },

    preloadAnimation(){
        let ele = this.$refs.canvas_1;
        let ctx = ele.getContext('2d');
        let self = this
        if(this.isInit==true){
            this.isInit = false
            preLoad('breath', this.width, this.height, (info) => {
                self.percent = 20
                self.breath(ctx, info)
                preLoad('sway', this.width, this.height, () => {
                    self.percent = 40
                    preLoad('wave', this.width, this.height, () => {
                        self.percent = 60
                        preLoad('blink', this.width, this.height, () => {
                            self.percent = 90
                            preLoad('neck', this.width, this.height, () => {
                                self.percent = 100
                                self.isDisable = false
                            });
                        });
                    });
                });
            })
        }
    },
    breath(ctx, info) {
        this.isDisable = false
        let i = 0;
        let bitmap = info.data;
        setInterval(() => {
            if (i < 90 && this.isDisable == false) {
                if (i !== 0)ctx.clearRect(this.offsetX, this.offsetY, info.w, info.h); //---不断绘制新图，清除旧图
                ctx.transferFromImageBitmap(bitmap[i]); //---播放离屏渲染的动画
                ++i;
            } else {
                i = 0
            }
        }, 70);
    },



    getPlayer(id, ctx) {  //--- 创建单例动画对象数组
        let player;
        if (!this.playerList.find(e => e.id === id)) { //--- 初始化单例对象
            let play = {
                id: id,
                player: new playAnimation(id, ctx)
            }
            player = play.player;
            this.playerList.push(play);
        } else {
            player = this.playerList.find(e => e.id === id).player;
        }
        return player;
    },

    playAnimation(e) {
        let id = e.target.id;
        let ctx = this.$refs.canvas_1.getContext('2d');
        this.isDisable = true;
        let promise = this.getPlayer(id, ctx).play(this.width, this.height); //---传入当前宽高，可以改变大小
        promise.then((res) => {
            let img_1 = new Image();
            img_1.src = 'common/images/breath/breath 0.png';
            ctx.drawImage(img_1, this.offsetX, this.offsetY, this.width, this.height); //---指定恢复画面
            this.isDisable = res;
        })
    },

    showMantle() {
        this.mantle = true
        this.zIndex = 2
    },
    cancelMantle() {
        this.mantle = false
        this.zIndex = 4
    },

    neckSwipe(e) {
        if (e.direction == 'up') {
            let ctx = this.$refs.canvas_1.getContext('2d');
            this.isDisable = true;
            let promise = this.getPlayer('neck', ctx).play(this.width, this.height); //---传入当前宽高，可以改变大小
            promise.then((res) => {
                let img_1 = new Image();
                img_1.src = 'common/images/breath/breath 0.png';
                ctx.drawImage(img_1, this.offsetX, this.offsetY, this.width, this.height); //---指定恢复画面
                this.isDisable = res;
            })
        }
    },
    ShowAchievement() {
        if (this.achievementShow == true)this.cancelMantle();
        else this.showMantle();
        this.achievementShow = !this.achievementShow
    },
    showSetting() {
        if (this.isShowSetting == true)this.cancelMantle()
        else this.showMantle()
        this.isShowSetting = !this.isShowSetting
    },
    //背包按钮绑定事件
    SM_click(e) {
        if (this.SMdiv_if == true)this.cancelMantle()
        else this.showMantle()
        console.log('in')
        this.SMdiv_if = !this.SMdiv_if
        var WP = new goods(e)
        this.WParray = WP.getgoodsArray()
        this.WPchecked.length = this.WParray.length
        this.WPchecked.fill(0)
        this.SM_button_bg.length = 3
        this.SM_button_bg[0] = '/common/images/GOODS/背包1.png'
        this.SM_button_bg[1] = '/common/images/GOODS/背包2.png'
        this.SM_button_bg[2] = '/common/images/GOODS/背包3.png'
    },
    //任务按钮绑定事件
    Task_click(e) {
        if (this.Taskdiv_if == true)this.cancelMantle()
        else this.showMantle()
        console.log('Task in')
        this.Taskdiv_if = !this.Taskdiv_if
        var TaskPanl = new Task(e)
        this.TaskArray = TaskPanl.getTaskArray()
        this.Task_button_bg.length = 2
        this.Task_button_bg[0] = '/common/images/Task/daily tasks.png'
        this.Task_button_bg[1] = '/common/images/Task/planned tasks.png'
    },
    //背包界面点击更换swipe标签页
    swipeToAny(e) {
        var Swiper_DOM
        console.info('swipe')
        let value = e.target.attr.value
        let id = e.target.attr.id
        if (id == 'TaskSwiper') {
            this.TaskIconBackground = this.Task_button_bg[value-1]
            Swiper_DOM = this.$refs.TaskSwiper
            console.info(JSON.stringify(Swiper_DOM))
        }
        else if (id == 'BackpackSwiper') {
            this.BackpackIconBackground = this.SM_button_bg[value-1]
            Swiper_DOM = this.$refs.BackpackSwiper
            console.info(JSON.stringify(Swiper_DOM))

        }
        swiperToo(id, value, Swiper_DOM)
    },

    //物品选中
    WPclick(e) {
        //console.log('WPWPclick'+e.target.attr.id)
        if (this.WPchecked[e.target.attr.id] == 0) {
            this.WPchecked.splice(e.target.attr.id, 1, 6)

        }
        else if (this.WPchecked[e.target.attr.id] == 6) {
            this.WPchecked.splice(e.target.attr.id, 1, 0)
        }
    },


    //设置
    show_set_Dialog() {
        this.showMantle()
        this.isShowSetting = true
    },
    setsetDialog() {
        this.cancelMantle()
        this.isShowSetting = false
    },
    show_mission_Dialog() {
        this.$element('missionDialog').show()
    },

    show_mission_tabChange(e) {
        console.info("Tab index: " + e.index)
        this.mission_menu_index = e.index
        console.info("Tab index: " + this.mission_menu_index)
    },
    dragStart1(e) {
        this.x1 = e.touches[0].globalX;
    },

    ondrag1(e) {

        let nx = e.globalX;
        if (nx >= 205 && nx <= 480) {
            this.left1 = nx;
        }

    },
    dragend1() {
        if (Number(this.left1) < 205) {
            this.left1 = 205
        }
    },

    dragStart2(e) {
        this.x2 = e.touches[0].globalX;
    },
    ondrag2(e) {
        let nx1 = e.globalX;
        if (nx1 <= 480 && nx1 >= 205) {
            this.left2 = nx1;
            console.log(this.left2);

        }
    },
    dragend2() {
        if (Number(this.left2) < 205) {
            this.left2 = 205
        }
    },


    CloseAchievementDialog() { //成就
        this.cancelMantle();
        this.achievementShow = false
    },
    gainAchievement(idx){
        console.info(idx)
        this.achievement_id = idx
        this.achievement_List[idx].flag = true
        this.showToast('领取成功')
    },
    toMap() {
        router.push({
            url:'pages/map/map'
        })
    },
    showToast(mes){
        prompt.showToast({
            message:mes
        })
    }
}
